<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/highlight.default.min.css">

    <script src="../static/js/marked.min.js"></script>
    <script src="../static/js/highlight.min.js"></script>
</head>

<body>
    <div id="content"></div>
    <script>
        const renderer = new marked.Renderer();
        renderer.code = function (code, language) {
            // 默认值language如果不存在，设置为 'plaintext'
            language = language || 'plaintext';
            // 使用 highlight.js 来处理代码高亮
            const highlighted = hljs.highlight(code, { language }).value;
            return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`;
        };

        fetch('./04 DOM对象.md')
            .then(response => response.text())
            .then(markdown => {
                const html = marked.parse(markdown, { renderer });
                document.getElementById('content').innerHTML = html;
                // 初始化 highlight.js
                document.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightBlock(block);
                });
            });
    </script>
</body>

</html>